<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="key" clearable placeholder="请输入用户名" style="width: 200px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </div>
        <div>
          <!-- <el-form-item>
            <el-button type="primary" @click="onVisible(1)"></el-button>
          </el-form-item> -->
        </div>
      </div>
    </el-form>
    <el-table v-loading="listLoading" row-key="userid" :data="authList" default-expand-all
      :row-class-name="tableRowClassName" border style="width: 100%" :tree-props="{ children: 'children', }">
      <el-table-column align="center" width="60" />
      <el-table-column prop="username" label="角色" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.username == key">自己</el-tag>
          <el-tag v-else-if="scope.$index == 0">上级</el-tag>
          <el-tag v-else>直推</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="truename" show-overflow-tooltip label="姓名" align="center" />
      <el-table-column prop="phone" show-overflow-tooltip label="手机号" align="center" />
      <el-table-column prop="dlsStr" show-overflow-tooltip label="服务商身份" align="center" />
      <el-table-column prop="tag" show-overflow-tooltip label="标签" align="center" />
      <el-table-column prop="uLevelStr" show-overflow-tooltip label="会员等级" align="center" />
      <el-table-column prop="total" show-overflow-tooltip label="个人总业绩" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtSelf }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="累计直推人数" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.countInv }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="团队总人数" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.countTeam }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="业务津贴" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtB1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="渠道津贴" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtB2 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="管理津贴" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtB3 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="调解服务" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtO1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="签约服务商" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtO2 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" show-overflow-tooltip label="结清服务" align="center">

        <template slot-scope="{row}">
          <span>{{ row.total.amtO3 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="140" align="center">

        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleNodeClick(scope.row)">查询此用户</el-button>
          <!-- <el-button size="mini" type="warning" style="margin-top: 10px;" @click="opneUserLevelTotal(scope.row)">伞下等级统计
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 用户等级统计 -->
    <digUserLeveTotal v-if="modalStatus == 2" :info="currentInfo" />
  </div>
</template>

<script>
import { GetUserTeam } from '@/api/users'
import { GetEnum } from "@/api/ctrls.js";
import digUserLeveTotal from '../components/digUserLeveLTotal.vue'
import index from '@/layout/index.vue';
export default {
  name: 'Name',
  components: { digUserLeveTotal },
  data() {
    return {
      // 筛选参数
      key: 'root', // 用户名

      // 列表
      listLoading: false,// 列表加载中
      tableData: [],
      totalCount: 0,
      PageIndex: 1,
      pageSize: 10000,

      optionsDls: {},
      hhrInfo: {},

      authList: [],
      props: {
        label: 'username',
        children: 'children'
      },

      modalStatus: 0, // 打开组件弹窗参数
      currentInfo: {}, // 当前用户信息
    }
  },
  watch: {
    PageIndex(val) {
      this.getData()
    },
    pageSize(val) {
      this.getData()
    },
    modalStatus(val) {
      this.getData()
    }
  },
  created() {
    this.key = this.$route.query.useraddress || 'root'
  },
  async mounted() {
    if (this.key != '') {
      this.getData()
    }
    this.GetEnum();

  },
  methods: {
    /**打开用户等级统计弹窗 */
    opneUserLevelTotal(info) {
      this.currentInfo = info;
      this.modalStatus = 2;
    },
    /////////////////////////////////////////////////// 初始化 ////////////////////////////////////////////////
    /**列表刷新加载 */
    async init() {
      this.PageIndex = 1;
      this.getData();
    },
    // 点击事件
    handleNodeClick(data) {
      console.log(data);
      if (data.username != '') {
        this.key = data.username;
        this.getData();
      } else {
        this.$message({
          message: "无用户名",
          type: "error"
        });
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == 0) {
        return 'warning-row1'
      } else if (rowIndex > 1) {
        return 'warning-row'
      }
      return ''
    },
    /////////////////////////////////////////////////// 数据请求 ////////////////////////////////////////////////
    /**获取主列表 */
    async getData() {
      this.listLoading = true
      const { list, totalCount, success, msg } = await GetUserTeam({
        username: this.key,
        PageIndex: this.PageIndex,
        PageSize: this.pageSize
      })
      this.totalCount = totalCount
      if (list) {
        this.authList = [];
        // this.authList = list;
        list.forEach((item, index) => {
          item.ctime = item.ctime.replace('T', ' ')
          if (index == 0) {
            this.authList[0] = item;
            this.authList[0].children = [];
            this.authList[0].index = index;
          } else if (index == 1) {
            this.authList[1] = item;
            this.authList[1].children = [];
            this.authList[1].index = index;
          } else {
            this.authList[1].children.push(item);
          }
        });
      }
      // console.log('主列表，', list)
      console.log('树形列表，', this.authList)
      this.listLoading = false
    },
    // 获取枚举
    async GetEnum() {
      const res = await GetEnum();
      this.optionsDls = res.data['dls'];
      this.hhrInfo = res.data['hhr'];
    },
  }
}
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.el-table .warning-row1 {
  background: #f0f9eb;
}
</style>
